<template>
  <div>
    <van-nav-bar
      title="个人信息编辑"
      left-text=""
      left-arrow
      @click-left="returnFn"
      @click-right="indexFn"
    >
      <template #right>
        <van-icon name="wap-home-o" size="18" />
      </template>
    </van-nav-bar>
    <van-image width="100" height="100" :src="userInfo.head_img" />
    <van-uploader :after-read="afterRead" />
    <van-cell
      title="昵称"
      is-link
      :value="userInfo.nickname"
      @click="nikenameShowFn"
    />
    <van-dialog
      v-model="nikenameShow"
      title="编辑昵称"
      show-cancel-button
      @confirm="nikenameUpdata"
      :before-close="nicknameBeforeClose"
    >
      <van-field v-model="nickname" label="昵称" placeholder="请输入用户名" />
    </van-dialog>
    <van-cell title="密码" is-link value="******" @click="passwordShowFn" />
    <van-dialog
      v-model="passwordShow"
      title="编辑密码"
      show-cancel-button
      @confirm="passwordUpdata"
      :before-close="passwordBeforeClose"
    >
      <van-field v-model="password" type="password" label="密码" />
    </van-dialog>
    <van-cell
      title="性别"
      is-link
      :value="userInfo.gender == 1 ? '男' : '女'"
      @click="show = true"
    />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import { getUserInfo, userUpdate, userUpload } from "@/apis/get";
import axios from "@/utils/request.js";
import { ContactList, Toast } from "vant";
export default {
  data() {
    return {
      userInfo: {},
      show: false,
      actions: [{ name: "男" }, { name: "女" }],
      id: localStorage.getItem("id"),
      nickname: "",
      password: "",
      nikenameShow: false,
      passwordShow: false,
    };
  },
  created() {
    let id = localStorage.getItem("id");
    getUserInfo(id).then((res) => {
      // console.log(res);
      this.userInfo = res.data.data;
    });
  },
  methods: {
    returnFn() {
      this.$router.push({
        path: "/personal",
      });
    },
    indexFn() {
      this.$router.push({
        path: "/index",
      });
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
      // console.log(item.name);
      this.userInfo.gender = item.name == "男" ? 1 : 0;
    },
    async afterRead(file) {
      // console.log(67, file);
      let formData = new FormData();
      formData.append("file", file.file);
      let res = await userUpload(formData);
      // console.log(73, res);
      userUpdate(this.id, {
        head_img: axios.defaults.baseURL + res.data.data.url,
      }).then((result) => {
        // console.log(75, result);
        this.userInfo.head_img = result.data.data.head_img;
      });
    },
    nikenameShowFn() {
      this.nikenameShow = true;
      this.nickname = this.userInfo.nickname;
    },
    // 昵称合法判定
    nicknameBeforeClose(action, done) {
      // console.log(action);
      if (action == "cancel") return done();
      if (this.nickname.length > 0 && this.nickname.length <= 12) {
        done();
      } else {
        done(false);
      }
    },
    // 昵称更新
    nikenameUpdata() {
      if (this.nickname.length > 0 && this.nickname.length <= 12) {
        userUpdate(this.id, {
          nickname: this.nickname,
        }).then((res) => {
          // console.log(105, res, this.nickname);
          this.userInfo.nickname = res.data.data.nickname;
        });
      } else {
        Toast("昵称输入不合法");
      }
    },
    passwordShowFn() {
      this.passwordShow = true;
      this.password = this.userInfo.password;
    },
    passwordBeforeClose(action, done) {
      if (action == "cancel") return done();
      if (this.password.length > 2 && this.password.length <= 12) {
        done();
      } else {
        done(false);
      }
    },
    // 密码更新
    passwordUpdata() {
      if (this.password.length > 2 && this.password.length <= 12) {
        userUpdate(this.id, {
          password: this.password,
        }).then((res) => {
          // console.log(127, res, this.password);
          this.userInfo.password = res.data.data.password;
        });
      } else {
        Toast("密码输入不合法");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.van-image {
  display: block;
  margin: 25px auto;
}
/deep/.van-nav-bar {
  height: 60px;
  line-height: 60px;
  div {
    height: 100%;
  }
}
/deep/.van-uploader {
  z-index: 1;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: 30%;
  .van-uploader__upload {
    width: 100%;
    input {
      width: 100%;
    }
  }
}
</style>